<template>
  <a-modal :title="$t('订单详情')" :visible="visible" @cancel="handleCancel" width="50%" class="modal_title" v-drag>
    <div class="wrapper">
      <a-row class="black-row" style="margin:-10px 15px 15px 15px">
        <a-col :span="12">
          <div class="top-row">{{$t('订单号')}}：{{ infoData.id }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('订单时间')}}：{{ infoData.createTime }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('订单类型')}}：{{ infoData.orderType_dictText }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('订单状态')}}：{{ infoData.state_dictText }}
            <a-popconfirm style="margin-left: 20px;" v-if="infoData.orderType == '0' 
              && (infoData.refundState == 1 || infoData.state == 3)" 
              :title="$t('将发起全额退款重试，是否继续？')" @confirm="() => reRefund(infoData)">
              <a>{{ $t('退款重试') }}</a>
            </a-popconfirm>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('业务渠道')}}：{{ infoData.deviceType_dictText }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('设备名称')}}：{{ infoData.deviceName }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('设备编码')}}：{{ infoData.deviceId }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('操作员')}}：{{ infoData.createBy }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('关联订单号')}}：{{ infoData.subOrderId }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('备注')}}：{{ infoData.comment }}</div>
        </a-col>
      </a-row>
      <a-row class="black-row">
        <a-col :span="12">
          <div class="top-row" v-if="infoData.payType_dictText == 0">{{$t('支付方式')}}：</div>
          <div class="top-row" v-if="infoData.payType_dictText != 0">{{$t('支付方式')}}：{{ infoData.payType_dictText }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('订单金额')}}：{{ infoData.price }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('优惠券抵扣')}}：{{ infoData.discountAmount?infoData.discountAmount.toFixed(2):'0' }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('优惠金额')}}：{{ infoData.activityDiscount?infoData.activityDiscount.toFixed(2):'0' }}（{{ infoData.activityDesc }}）</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('会员优惠')}}：{{ infoData.memberDiscount?infoData.memberDiscount.toFixed(2):'0' }}</div>
        </a-col>
        <a-col :span="12" v-if="isTax != 0">
          <div class="top-row">{{$t('其中税费')}}：{{ infoData.taxPrice?infoData.taxPrice.toFixed(2):'0' }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('实付金额')}}：{{ infoData.payAmount?infoData.payAmount.toFixed(2):'0' }}</div>
        </a-col>
      </a-row>
      <a-row class="black-row">
        <a-col :span="12">
          <div class="top-row">{{$t('会员ID')}}：{{ infoData.memberId }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('手机号')}}：{{ infoData.memberPhone }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('姓名')}}：{{ infoData.memberName }}</div>
        </a-col>
        <a-col :span="12">
          <div class="top-row">{{$t('卡号')}}：{{ infoData.cardSn }}</div>
        </a-col>
      </a-row>
      <a-row class="table-row">
        <a-col style="font-size: 15px; font-weight: bold"> {{$t('商品明细')}} </a-col>
        <a-col style="margin-top: 10px">
          <a-table
            bordered
            class="j-table-force-nowrap"
            ref="table"
            rowKey="id"
            :columns="columns"
            :dataSource="goodsList"
            :pagination="pagination"
          >
            <span slot="goodsName" slot-scope="text, record">
              <a v-if="record.form == '5'" @click="handleForm(record)">{{text}}</a>
              <div v-else>{{text}}</div>
            </span>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel">{{$t('关闭')}}</a-button>
    </template>
    <type-name-detail-modal ref="detailForm"></type-name-detail-modal>
  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import TypeNameDetailModal from './TypeNameDetailModal'
export default {
  name: 'TypeNameModal',
  components: {
    TypeNameDetailModal,
  },
  data() {
    return {
      visible: false,
      columns: [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
        },
        {
          title: this.$t('单价'),
          align: 'center',
          dataIndex: 'price',
        },
        {
          title: this.$t('数量'),
          align: 'center',
          dataIndex: 'amount',
        },
        {
          title: this.$t('优惠金额'),
          align: 'center',
          dataIndex: 'activityDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('会员优惠'),
          align: 'center',
          dataIndex: 'memberDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('优惠券抵扣'),
          align: 'center',
          dataIndex: 'couponDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('金额'),
          align: 'center',
          dataIndex: 'payAmount',
          customRender: (text, record) => {
            return record.payAmount.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
      ],
      goodsList: [],
      pagination: false,
      recordsAmount: '',
      infoData: {},
      otherList:[],
      isTax: localStorage.getItem('taxSetting')
    }
  },
  mounted() {},
  methods: {
    getGoodsList(id) {
      getAction('/order/bisOrder/queryBisOrderGoodsByMainId', { id: id }).then((res) => {
        this.goodsList = []
        this.otherList = []
        res.result.forEach(col => {
          if(col.isChild == 0){
            this.goodsList.push(col)
          }else{
            this.otherList.push(col)
          }
        })
        if(this.goodsList.length > 0){
          this.addSumRow(['goodsName', 'amount', 'activityDiscount', 'memberDiscount', 'couponDiscount', 'taxPrice', 'payAmount'], this.goodsList)
        }
      })
    },
    addSumRow(myArr, dataSource) {
      let total = {}
      myArr.forEach((tcn, ind)=> {
        if (ind == 0) {
          total[tcn] = this.$t('合计')
        } else {
          total[tcn] = 0
        }
      })
      for (let key in total) {
        dataSource.forEach(function (ds) {
          if (!isNaN(total[key])) {
            total[key] += Number(ds[key])
          }
        })
      }
      dataSource.push(total)
    },
    handleForm(record){
      this.$refs.detailForm.edit(record,this.otherList)
    },
    edit(record) {
      this.isTax = localStorage.getItem('taxSetting')
      this.columns = [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
        },
        {
          title: this.$t('单价'),
          align: 'center',
          dataIndex: 'price',
        },
        {
          title: this.$t('数量'),
          align: 'center',
          dataIndex: 'amount',
        },
        {
          title: this.$t('优惠金额'),
          align: 'center',
          dataIndex: 'activityDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('会员优惠'),
          align: 'center',
          dataIndex: 'memberDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('优惠券抵扣'),
          align: 'center',
          dataIndex: 'couponDiscount',
          customRender: (text, record) => {
            return text.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
        {
          title: this.$t('金额'),
          align: 'center',
          dataIndex: 'payAmount',
          customRender: (text, record) => {
            return record.payAmount.toFixed(2)
          },
          customCell:function(){
            return{
              style:{
                 textAlign: 'right',
              }
            }
          }
        },
      ]
      if (this.isTax != 0) {
        this.columns.splice(6, 0, {
          title: this.$t('其中税费'),
          align: 'center',
          dataIndex: 'taxPrice',
          width: 96,
          customRender: (text, record) => {
            return record.taxPrice.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
                textAlign: 'right',
              },
            }
          },
        })
      }
      this.visible = true
      this.infoData = record
      this.getGoodsList(record.id)
    },
    handleCancel() {
      this.visible = false
    },
    reRefund(record){
      let that = this
      postAction('/pay/bisOrderPay/reRefund', { orderId: record.id }).then((res) => {
        if(res.success){
          that.$message.success(res.message);
          that.$emit('ok');
        }else{
          that.$message.warning(res.message);
        }
      })
    }
  },
}
</script>
<style>
.black-row {
  margin: 10px 15px;
  border: 1px solid #d9d9d9;
  padding: 10px;
  border-radius: 5px;
  font-size: 15px;
}
.table-row {
  margin: 10px 10px;
  border-radius: 5px;
  font-size: 15px;
}
.top-row {
  margin: 5px;
  font-size: 15px;
}
</style>